<template>
  <el-dialog title="添加参数" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="参数名称" label-width="120">
        <el-input v-model="form.attr_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="参数类型" label-width="120">
        <el-select v-model="form.attr_sel" placeholder="请选择活动区域">
          <el-option label="动态类型" value="many"></el-option>
          <el-option label="静态类型" value="only"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false;submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { addAttributes } from '@/api/attributes'
import { MessageType } from 'element-ui/types/message'

@Component
export default class paramsAdd extends Vue {
  @Prop()
  private update?:()=>void

  private dialogFormVisible=false
  private form={
    id: -1,
    attr_name: '',
    attr_sel: ''
  }

  isOpen (parentId:number) {
    this.form.id = parentId || this.form.id
    this.dialogFormVisible = !this.dialogFormVisible
  }

  async submit () {
    const { data, meta } = await addAttributes(this.form)
    console.log(data, meta)
    let type:MessageType
    if (meta.status >= 200 && meta.status < 300) {
      type = 'success'
      this.form.attr_name = ''
    } else { type = 'error' }
    this.$message({ message: meta.msg, type })
    this.update && this.update()
  }
}
</script>

<style scoped>

</style>
